<template>
	<view>
		<view class="ek-card">
			<view class="h2">订单编号：{{ info.order_sn }}</view>
			<view class="h2">订单金额：￥{{ pay_money }}</view>
			<view class="h2 flex aic">退款金额：<text class="ek-color-red">￥{{pay_money}}</text>

			</view>
		</view>

		<view class="ek-card">
			<view>
				<view class="h1">{{ info.title }}</view>
				<view class="h3">{{ info.remark }}</view>
				<view class="h3">{{ info.start_time | formatDate }}</view>
				<view class="h2 flex jcsb" v-for="(sub, index) in info.child" :key="index">
					<view>座位号：<text
							class="ek-color-red">{{sub.region_number}}区{{sub.row_number}}排{{sub.column_number}}号</text>
					</view>
					<view>{{sub.price}}</view>
				</view>
			</view>
		</view>

		<picker mode="selector" :range="refund_msg" @change="onRefundOrder">
			<view class="ek-cell">
				<view class="ek-title">退款原因 <text v-if="msg">：{{msg}}</text></view>
				<view class="iconfont icon-jiantou"></view>
			</view>
		</picker>

		<view class="ek-submit-btn" @click="onSubmit">确定</view>
	</view>
</template>

<script>
	import productConSwiper from "@/components/productConSwiper/index.vue";
	import {
		HTTP_REQUEST_URL
	} from "@/config/app";
	import {
		activityRefundOrder,
		payActivity,
		performGetOrderDetail
	} from "@/api/2_activity";
	import {
		groupOrderDetail,
		getOrderDetailType,
		refundMessage,
		refundApply
	} from "@/api/order";
	export default {
		components: {
			productConSwiper
		},
		data() {
			return {
				item: {},
				info: {
					child: []
				},
				refund_msg: [],
				msg: '',
				day_time: '',
				sub_bill: '',
			};
		},
		onLoad(options) {
			this.order_sn = options.order_sn
			this.init()
			// 退款理由
			this.refundMessage()
		},
		computed: {
			pay_money() {
				return this.info.child.reduce((a, b) => {
					return +a + +b.price
				}, 0)
			}
		},
		methods: {
			refundMessage() {
				refundMessage().then(res => {
					this.refund_msg = res.data
				})
			},
			openTip() {
				uni.showModal({
					title: '退款规则',
					content: `距离演出开始时间${this.day_time}天之内可全额退款，距离演出开始xx分钟可退款订单金额的${ 100 - this.sub_bill}%`,
					showCancel: false,
					confirmText: '我知道了'
				})
			},
			init() {
				performGetOrderDetail(this.order_sn).then(res => {
					let {
						data
					} = res
					this.info = data
				})
			},
			onRefundOrder(e) {
				this.msg = this.refund_msg[e.detail.value]
			},
			onSubmit() {
				if (this.msg == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择退款原因'
					})
					return
				}
				let ids = []
				this.info.orderProduct.map(item => {
					ids.push(item.order_product_id)
				})
				refundApply(this.order_id, {
					ids: ids.toString(),
					refund_price: this.info.total_price,
					refund_type: "1",
					type: "1",
					refund_message: this.msg,
					mark: "", 
					num: this.info.total_num
				}).then(res => {
					this.$util.Tips({
						title: '提交成功',
						icon: 'success'
					});
					uni.navigateBack({
						delta: 1
					})
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err
					})
				})
			}
		}
	};
</script>

<style lang="scss">
	@import "./style.scss";

	.tip {
		width: 20px;
		height: 20px;
		border-radius: 20px;
		background: #e93323;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 10px;
	}
</style>
